<template>
  <div class="sub-category">
    <div class="container">
      <!-- 面包屑区域 -->
      <SubBread :subCate="cate"></SubBread>

      <!-- 筛选区域 -->
      <SubFilter :subCate="cate" @filter-change="hFilterChange" />

      <!-- 排序组件区域 -->
      <SubSort @sort-change="hSortChange" />

      <!-- 商品列表 -->
      <div class="sort-list-container">
        <goodsItems v-for="good in goodList" :key="good.id" :good="good" />
      </div>
      <!-- 上拉加载 -->
      <XtxInfinteLoading
        @load="loadData"
        :isFinished="isFinished"
        :isLoading="isLoading"
      />
    </div>
  </div>
</template>
<script>
import goodsItems from './components/goods-item.vue'
import SubBread from './components/sub-bread.vue'
import { ref, onMounted } from 'vue'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
import { findSubCategoryFilter, findSubCategoryGoods } from '@/api/category'
import SubFilter from './components/sub-filter.vue'
import SubSort from './components/sub-sort.vue'

const useCate = () => {
  const cate = ref({})
  const route = useRoute()

  const cateList = (id) => {
    findSubCategoryFilter(id || route.params.id).then(data => {
      // 品牌  cateList.value.brands  没有‘全部’分类  我们自己添加一个全部的分类
      // 在品牌list中的头上添加一个全部分类  unshift

      // 给每一个品牌添加一个专门用来控制是否激活的字段 selected true 激活 false 不激活
      data.result.brands.forEach(it => { it.selected = false })
      data.result.brands.unshift({
        id: null,
        name: '全部',
        selected: true
      })

      data.result.saleProperties.forEach(item => {
        // 给每一个规格添加一个专门用来控制是否激活的字段 selected true 激活 false 不激活
        item.properties.forEach(i => { i.selected = false })
        item.properties.unshift({
          id: null,
          name: '全部',
          selected: true
        })
      })

      cate.value = data.result
    })
  }

  // 页面创建时执行（直接从路由中获取id）
  onMounted(() => {
    cateList(route.params.id)
  })
  // 在路由跳转之后更新之前自动执行
  // beforeEach((to,from,next)=>{})
  onBeforeRouteUpdate((to) => {
    // to指代的是目标路由对象 to拿到最新的路由参数id
    // 使用最新id获取数据
    cateList(to.params.id)
  })
  return { cate }
}
const useLoadData = () => {
  const route = useRoute()
  // 获取list
  const goodList = ref([])
  // 请求参数
  let reqParams = {
    page: 1,
    pageSize: 20,
    categoryId: route.params.id,
    sortField: null, // 排序类别
    attrs: [], // 商品属性
    brandId: null // 品牌名称
  }
  // 上拉加载更多
  const isLoading = ref(false)
  const isFinished = ref(false)
  const loadData = () => {
    isLoading.value = true
    findSubCategoryGoods(reqParams).then(res => {
      isLoading.value = false
      // 新数据要追加到数组中
      goodList.value.push(...res.result.items)
      // 页码加1
      reqParams.page++
      // 判断没有数据
      if (res.result.items.length === 0) {
        // 加载完成
        isFinished.value = true
      }
    })
  }
  // 页面创建时执行（直接从路由中获取id）
  onMounted(() => {
    // reqParams = {}
    reqParams.categoryId = route.params.id
    loadData()
  })
  // 在路由跳转之后更新之前自动执行
  // beforeEach((to,from,next)=>{})
  onBeforeRouteUpdate((to) => {
    // to指代的是目标路由对象 to拿到最新的路由参数id
    // 使用最新id获取数据
    reqParams = {}
    // 重置页码,清空数据
    reqParams.page = 1
    goodList.value = []
    reqParams.categoryId = to.params.id
    loadData()
  })

  // 父组件收到了筛选条件
  const hFilterChange = filterParams => {
    // 更新条件
    reqParams.brandId = filterParams.brandId
    reqParams.attrs = filterParams.attrs
    // 重置页码,清空数据
    reqParams.page = 1
    goodList.value = []
    isFinished.value = false
    // 重发请求
    loadData()
  }
  // 父组件收到了排序条件
  const hSortChange = sortField => {
    reqParams = { ...reqParams, ...sortField }
    // 重置页码,清空数据
    reqParams.page = 1
    goodList.value = []
    isFinished.value = false

    loadData()
  }

  return { goodList, hFilterChange, hSortChange, loadData, isLoading, isFinished }
}

export default {
  name: 'Sub',
  components: { SubBread, SubFilter, SubSort, goodsItems },
  setup () {
    const { cate } = useCate()

    const { goodList, hFilterChange, hSortChange, loadData, isLoading, isFinished } = useLoadData()

    return { cate, goodList, hFilterChange, hSortChange, loadData, isLoading, isFinished }
  }
}
</script>

<style scoped lang='less'>
.goods-list {
  background: #fff;
  padding: 0 25px;
  margin-top: 25px;
}
.sort-list-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  background-color: #fff;
}
</style>
